<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>lazyload</title>
    <meta name="keywords" content="lazyload, image"/>
    <meta name="description" content="Demo for lazyload"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="shortcut icon" href=""/>
    <link rel="apple-touch-icon" href=""/>
</head>
<body>
  <div class="nav">
    <button type="button" id="add">添加</button>
  </div>
  <div class="container">
    <div class="box">
      <img class="fadeIn" data-src="http://.ciimg.com/602367/60d368f072e16f46.png" src="http://i4.eiimg.com/602367/32f51206f29d842a.jpg" title="1" alt="1"/>
    </div>
    <div class="box">
      <img class="fadeIn" data-src="http://i1.ciimg.com/602367/3b6b78815d620e71.png" src="http://i4.eiimg.com/602367/32f51206f29d842a.jpg" title="2" alt="2"/>
    </div>
    <div class="box">
      <img class="fadeIn" src="http://i4.eiimg.com/602367/32f51206f29d842a.jpg" alt="3" data-src="http://i1.ciimg.com/602367/209a7070e6e08aff.png" title="3">
    </div>
    <div class="box">
      <img class="fadeIn" src="http://i4.eiimg.com/602367/32f51206f29d842a.jpg" alt="4" data-src="http://i1.ciimg.com/602367/9ff3e9ac3bbe9417.png" title="4">
    </div>
    <div class="box">
      <img class="fadeIn" src="http://i4.eiimg.com/602367/32f51206f29d842a.jpg" alt="5" data-src="http://i1.ciimg.com/602367/a82d14066140c1f3.png" title="5">
    </div>
    <div class="box">
      <img class="fadeIn" src="http://i4.eiimg.com/602367/32f51206f29d842a.jpg" alt="6" data-src="http://i1.ciimg.com/602367/b7260814429c7352.png" title="6">
    </div>
    <div class="box">
      <img class="fadeIn" src="http://i4.eiimg.com/602367/32f51206f29d842a.jpg" alt="7" data-src="http://i1.ciimg.com/602367/ccba42afd3f85fb0.png" title="7">
    </div>
  </div>
  <script src="lazyload.js"></script>
</body>
</html>